<template>
  <div class="box">
    <h1>组件A,{{ count.num }}</h1>
    <van-button type="primary" @click="handlePlus">+</van-button>
    <van-button type="primary" @click="handleAdd">新增商品</van-button>
    <div v-for="item in goods.list">
      名称{{ item.name }} 价格 {{ item.price }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCount } from "../../store/count";
import { useGoods } from "../../store/goods";
let count = useCount();

// 可以直接改数据
const handlePlus = () => {
  count.num++;
};

const goods = useGoods();
const handleAdd = () => {
  goods.list.push({
    name: "新水果",
    price: Math.round(Math.random() * 60 + 40),
  });
};
</script>

<style scoped>
.box {
  height: 400px;
  border: 1px solid #333;
}
</style>
